<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
      <!-- 阻止放大缩小 -->
      <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <title>量表测试</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/theme-custom.css">
    <link rel="stylesheet" href="css/module.css">
    <script src="data/dic.js"></script>
    <script>



       var url = "data/marriage/hunyinzhiliang.js";
       var code = getQueryVariable("code");
       if(code)
        {
          document.write('<scr'+'ipt type="text/javascript" src="'+ dic[code] +'"></sc'+'ript>');
        }
        else
        {
          document.write('<scr'+'ipt type="text/javascript" src="'+ url +'"></sc'+'ript>');

        }
    </script>
    <script src="js/vue.min.js"></script>
  </head>
  <body>
    <div id="app">
        <div class="content">
              <div class="header">
                <header class="mint-header is-fixed">
                  <div class="mint-header-button is-left">
                    <a href="javascript:top.backToPageTest()" class="">
                      <button class="mint-button mint-button--default mint-button--normal">
                        <span class="mint-button-icon"><i class="mintui mintui-back"></i></span>
                        <label class="mint-button-text">返回</label>
                      </button>
                    </a>
                  </div>
                  <h1 class="mint-header-title">{{title}}</h1>
                  <div class="mint-header-button is-right">
                    <button class="mint-button mint-button--default mint-button--normal">
                      <label class="mint-button-text">{{page}}/{{ pages }}</label>
                    </button>
                  </div>
                </header>
                <div class="mint-header-height"></div>
              </div>
              <div class="main">
                <form id="form1" runat="server">
                  <div class="main-list clearfix">
                    <transition-group :name="transitionName">

                        <div class="problemList" v-show="(index>=(page-1) * pagesize) && (index < page* pagesize)" v-for="(item, index) in data" :key="index">

                          <div class="subject">
                             <h3>{{index+1}}.{{item.subject.title}}</h3>
                          </div>
                          <div class="option">
                            <ul class="clearfix" @click="checkout(index)">
                              <!-- 多选 -->
                              <li v-if="item.multiSelect == 2" v-for="(li, liIndex) in item.subject.option" :key="liIndex" @click="choiceCheck(index,liIndex)">
                                <input type="checkbox" :value="li" v-model="item.checkbox"/>
                                <span>{{li}}</span>
                              </li>
                              <!-- 单选 -->
                              <li v-if="item.multiSelect == 0" v-for="(li, liIndex) in item.subject.option" :key="liIndex" @click="choiceRadio(index,liIndex)">
                                <input type="radio" :value="li" v-model="item.checkbox"/>
                                <span>{{li}}</span>
                              </li>

                            </ul>
                          </div>
                        </div>
                    </transition-group>
                  </div>
                  <div class="btn-groups-height"></div>
                  <div class="btn-groups clearfix float-right">
                    <div style="position: absolute; right: 0; bottom: 0">
                      <span v-show="page > 1" class="submit prev" @click="prev">上一页</span>
                      <span v-show="page < pages" class="submit next" @click="next">下一页</span>
                      <span v-show="page == pages" class="submit save" @click="save">提交</span>
                    </div>
                  </div>
                </form>
              </div>
        </div>
    </div>
  </body>
</html>
<script>
  new Vue({
    el: '#app',
    data: {
        transitionName: 'slide',
        title:"",
        masterlist:[1,2,3,4,5,6,7,8],
        masterscore:[0, 1, 2, 3],
        slavelist:[],
        slavescore:[],
        data:[

        ],
        evalue:[

        ],
        page:1,
        pagesize:5,
        isSubmit: false,//提交是否显示
    },
    computed:{
      pages:function()
      {
        if(this.data.length> 0 && this.data.length%this.pagesize == 0)
        {
          return parseInt(this.data.length/this.pagesize);
        }else if(this.data.length> 0)
        {
          return parseInt(this.data.length/this.pagesize) + 1;
        }
        else
          return 0;
      }
    },
    created(){

      this.data = settings.data;
      this.evalue = settings.evalue;
      this.title = settings.title;
      this.masterlist = settings.masterlist;
      this.masterscore = settings.masterscore;
      this.slavelist = settings.slavelist;
      this.slavescore = settings.slavescore;

      console.log(settings);
    },
    mounted(){


    },
    watch:{
      dataIndex(news, olds){//动画切换
        this.transitionName = news < olds ? 'slide_back' : 'slide';
      }
    },
    methods:{
      choiceRadio(index, liIndex){//单选操作
        this.choice(index, liIndex, 0, null);
      },
      choiceCheck(index, liIndex){//多选操作
        this.choice(index, liIndex, 2, null);
      },
      choice(index, liIndex, choiceStyle, liChildIndex){
        //console.log(liIndex)
        setTimeout(() => {

          switch(choiceStyle){//判断多选、单选、组合单选
            case 0://单选
              let radioTitle = this.data[index].subject.title;

              //console.log(this.data);
              break;
            case 2://多选
              if(liIndex == 0 && this.data[index].isFirst){//判断多选是否选择“无”选项
                this.data[index].checkbox = ['无'];
                this.data[index].isFirst = false;
              }else{
                this.data[index].checkbox.forEach((value, i) => {
                  let firstIndex = this.data[index].checkbox.indexOf('无');
                  if(firstIndex == i){
                    this.data[index].checkbox.splice(firstIndex, 1);//删除多选第一个
                  }
                })
                this.data[index].isFirst = true;
              }
              break;
          }

          if(this.data[index].checkbox.length>0){

            this.data[index].isSelect = true;
          }else{

            this.data[index].isSelect = false;
          }


      //    console.log(this.data[index].checkbox)
        })

      },

      prev(){//上一题
        this.page -=1;
      },
      next(){//下一题
       this.page +=1;
      },
      checkout(currentIndex)
      {
        console.log(currentIndex);
        if(currentIndex == 0)
          return true;
        if(this.data[currentIndex -1].isSelect == false)
        {
          top.$Message.error(this.data[currentIndex -1].subject.title+'\t必选')
          return false;
        }
      },
      save(){//保存数据---这是完成按钮
        var unnames = "";
        this.data.forEach((value,i) =>{
            if(value.checkbox.length == 0)
            {
              unnames += value.subject.title + "；";
            }
          });

        if(unnames)
        {
          top.$Modal.warning({
            title: '部分题目没有选择：',
            content: unnames
          })
          return false;
        }
        var text = JSON.stringify(this.data);
        console.log(text);

        var scores = 0;

        this.data.forEach((value,i) =>{
            console.log(value);
            if(Array.isArray(value.checkbox))
            {
              value.checkbox.forEach((cvalue,ci) =>{
              var selectIndex = value.subject.option.indexOf(cvalue);
              if(selectIndex >= 0)
                if(this.masterlist.indexOf(value.subject.no) >= 0)
                  scores += this.masterscore[selectIndex];
                else
                  scores += this.slavescore[selectIndex];
              });
            }
            else
            {
              var selectIndex = value.subject.option.indexOf(value.checkbox);
              if(selectIndex >= 0)
              {
                if(this.masterlist.indexOf(value.subject.no) >= 0)
                  scores += this.masterscore[selectIndex];
                else
                  scores += this.slavescore[selectIndex];
              }
            }
            /*

           */

          });

        //alert(scores);

        for(let i = 0;i < this.evalue.length;i++)
        {
          console.log(this.evalue[i])
          if(scores >= this.evalue[i].min)
          {
            top.$Modal.info({
              title: '测评结果',
              content: this.evalue[i].value,
              style: {
                height: '800px'
              },
              onOk: function () {
                top.backToPageTest()
              }
            })
            top.logEnd(scores, this.evalue[i].value)
            break;
          }
        }

      },
    }
  });
</script>
